<!--聊天框的表情包-->
<template>
    <div id="robot-emotion-box" class="edit-div"
         v-html="(innerText||'').replace(/#[\u4E00-\u9FA5]{1,3};/gi, emotionToImg)"
         contenteditable="true"
         @blur="changeText"
         @compositionend="changeText"
    >
    </div>
</template>
<script>
import { xssFilter } from "@/utils/xssFilter";
    export default {
        name: 'editDiv',
        props: {
            value: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                isLocked: false,
                innerText: this.value,
              list : ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', '好的', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
            }
        },
        watch: {
            value() {
                this.innerText = this.value;
                this.$nextTick(function () { 
                    let obj = document.getElementById("robot-emotion-box")
                    if (window.getSelection) { //ie11 10 9 ff safari
                        obj.focus(); //解决ff不获取焦点无法定位问题
                        let range = window.getSelection(); //创建range
                        range.selectAllChildren(obj); //range 选择obj下所有子内容
                        range.collapseToEnd(); //光标移至最后
                    } else if (document.selection) { //ie10 9 8 7 6 5
                        let range = document.selection.createRange(); //创建选择对象
                        //var range = document.body.createTextRange();
                        range.moveToElementText(obj); //range定位到obj
                        range.collapse(false); //光标移至最后
                        range.select();
                    }
                 
                })
            }
        },
        mounted() {
            let vue = this;
        },
        methods: {
            changeText() {
                const content = xssFilter(this.getContent());
                this.$emit('input', content);
            },
            parseDom(arg) {
                let objE = document.createElement("div");
                objE.innerHTML = arg;
                return objE.childNodes;
            },
            // 将匹配结果替换表情图片
            emotionToImg(res) {
                res = res || '';
                let word = res.replace(/[#;]/gi, '')
                let index = this.list.indexOf(word)
                if (index > -1) {
                    return `<img src="static/image/wx/${index}.gif"  data-code="${word}"  align="middle"/>`
                } else {
                    return res;
                }
            },
            getContent() {
                let content = "";
                let chs = this.parseDom(this.$el.innerHTML);
                for (let v of chs) {
                    if (v.tagName === "img" || v.tagName === "IMG") {
                        content += ("#" + (v.dataset.code || '') + ";");
                    } else if (v.tagName === "div" || v.tagName === "DIV") {
                        content += (v.innerText || '');
                    } else {
                        content += (v.wholeText || '');
                    }
                }
                
                if(content.trim()===""){
                    content = this.$el.innerText;
                }
                return content;
            }
        }
    }
</script>
<style scoped>
    img {
        display: inline-block;
        width: 100%;
    }

    .edit-div {
        width: 70%;
        height: 70%;
        overflow: auto;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
        padding: 10px 10px;
        /*border:1px solid rgb(249 244 244);*/
        margin: 10px 10px;
        float: left;
    }

    [contenteditable=true] {
        user-modify: read-write-plaintext-only;
    }

    .edit-div empty:before {
        content: attr(placeholder);
        display: block;
        color: #ccc;
    }

</style>